<template>
  <div id="app" >
      <!-- <button @click="$router.push({path:'./home'})" >toA</button>
      <button  @click="$router.push({path:'./a'})"  >toB</button> -->
      <nav class="nav">
          <router-link to="/basic">基础~</router-link>
          <router-link to="/transition">动画~</router-link>
          <router-link to="/advance">进阶~</router-link>
          <router-link to="/todolist">todolist~</router-link>
          <router-link to="/vuex">vuex~</router-link>
      </nav>
         <router-view></router-view>
  </div>
</template>

<script>
// import Vue from 'vue'
export default {
  components: { 
  },
  data(){
    return {

    }
  }

}
</script>

<style scoped>
.nav{
  display: flex;
  justify-content:space-around;
  height: 45px;
  background-color: #66f7e1;
}
a{
  text-decoration: none;
  line-height: 45px;
}
</style>
